<template>
  <div class="image-show"
       :class="flag ? 'show' : ''">
    <img :src="currentImage"
         alt=""
         class="image-show-img">
    <div class="image-show-controller-panel">
      <i title="没有了"
         class="el-icon-arrow-left image-show-controller disabled"
         v-if="!(prev !== false && prev >=0 )"></i>
      <i title="上一张"
         class="el-icon-arrow-left image-show-controller"
         @click.stop="showImg([], prev)"
         v-if="(prev !== false && prev >=0 )"></i>
      <i class="el-icon-error image-show-close"
         @click="closeImg"
         style="cursor:pointer;"></i>
      <i title="下一张"
         class="el-icon-arrow-right image-show-controller"
         @click.stop="showImg([], next)"
         v-if="next"></i>
      <i title="没有了"
         class="el-icon-arrow-right image-show-controller disabled"
         v-if="!next"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imagegallery',
  data () {
    return {
      sourceArray: [],
      flag: false, // 控制显示隐藏
      prev: 0, // 上一个图片的索引
      next: 0, // 下一个图片的索引
      currentImage: '' // 当前的图片的 url
    }
  },
  methods: {
    /**
     * @description 显示预览大图
     * @param { String | Array } srcArray 图片源的数组
     * @param { Number } index 当传入的 srcArray 是数组时，当前图片的索引 index
     */
    showImg (srcArray, index) {
      const imgSource = srcArray.length > 0 ? srcArray : this.sourceArray
      const isSourceArray = Array.isArray(imgSource)
      const src = isSourceArray ? imgSource[index] : imgSource
      if (isSourceArray) {
        this.sourceArray = imgSource
        this.currentImage = src.url
        this.prev = ((index - 1) >= 0) ? index - 1 : false
        this.next = (index + 1) <= imgSource.length - 1 ? index + 1 : false
      } else {
        this.currentImage = imgSource
        this.prev = false
        this.next = false
      }
      this.flag = true
    },
    /**
     * @description 关闭图片展示区域
     */
    closeImg () {
      this.currentImage = ''
      this.flag = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
